<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<script lang = "ts">
export default {
  name: "Person",

  // beforeCreate是Vue2生命周期中的首先执行的勾子函数
  beforeCreate() {
    console.log('beforeCreate begin')
  },

  // 通过setup函数来进行组合式API写法
  // setup函数中的this是undefined
  // Vue3中的setup函数的执行顺序比Vue2中的beforeCreate勾子函数更早
  // Vue2的选项式写法可以和Vue3的组合式写法共存，Vue2中data可以读取到setup函数中定义的数据，但setup函数中无法读取到选项式写法中的数据
  // 若setup中的返回值和Vue2中的选项式写法中的data或method冲突，则会以setup函数中值为主
  setup(){
    console.log('setup begin')
    // 数据，注意下面这种写法数据不是响应式的
    let name = 'Sen'
    let age = '18'
    let tel = '13888888888'

    // 方法
    function changeName(){
      name = name = '森'? 'Sen':'森'
    }

    function changeAge(){
      age +=1
    }

    function showTel(){
      alert(tel)
    }

    // 需要在setup函数中将数据、方法返回，<template>中才能使用
    return {name,age,tel,changeName,changeAge,showTel}
  }

}
</script>

<style scoped>

</style>